<template>
  <div class="wrap">
    <div class="wrapper">
      <Top :projectId="baojing"></Top>
      <div class="shu-moluai">
        <div class="sideba">
          <div class="right-sidebar">
            <div class="cewen-bar">能耗监测</div>
            <div class="conn-bar" id="style-1">
              <div class="item-conn lie-bg" @click="shishi()">实时数据</div>
              <div class="item-conn lie-bg1">抄表数据</div>
            </div>
          </div>
        </div>
        <div class="main-dianli-bottom" id="style-1">
          <div class="mainbg-tit">传感器电压</div>
          <div class="nongdu-top">
            <div class="zuti">区所选择:</div>
            <div class="pici-xuanze">
              <el-select
                v-model="substationValue"
                placeholder="请选择"
                @change="isStation"
              >
                <el-option
                  v-for="item in substationList"
                  :key="item.deptId"
                  :label="item.name"
                  :value="item.deptId"
                >
                </el-option>
              </el-select>
            </div>
            <div class="zuti">设备名称:</div>
            <div class="pici-xuanze">
              <el-select
                v-model="deviceValue"
                placeholder="请选择"
                @change="isDevice"
              >
                <el-option
                  v-for="item in deviceList"
                  :key="item.device_id"
                  :label="item.device_name"
                  :value="item.device_id"
                >
                </el-option>
              </el-select>
            </div>
            <div class="zuti">时间维度:</div>
            <div class="pici-xuanze">
              <el-select
                v-model="timeValue"
                placeholder="请选择"
                @change="isTime"
              >
                <el-option
                  v-for="item in timeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="zuti">选择日期:</div>
            <div class="pici-xuanze">
              <el-date-picker
                :clearable="false"
                :value-format="formatValue"
                v-model="dateValue"
                :type="timeType ? 'year' : 'month'"
                placeholder="选择月"
                @change="isDate"
              >
              </el-date-picker>
            </div>
            <div class="pici-xuanze anniuy">
              <el-button @click="startdui" class="anniu">查询</el-button>
              <el-button @click="daochu" class="anniu">导出</el-button>
            </div>
          </div>
          <div
            class="zhexiantu marbottom"
            style="width: 100%; height: 280px"
            id="zhexianceshi"
          >
            <Echarts
              ref="chart"
              :chartData="echartData.order"
              isLimit:false
            ></Echarts>

            <!-- 折线图 -->
          </div>
          <div
            class="tableyang"
            id="style-1"
            style="height: calc(100% - 370px); overflow-x: hidden; overflow-y: auto"
          >
            <el-table :data="meterList">
              <el-table-column
                property="device_name"
                label="设备名称"
              ></el-table-column>
              <el-table-column
                property="ele_count"
                label="能耗"
              ></el-table-column>
              <el-table-column property="unit" label="单位"></el-table-column>
              <el-table-column
                property="time_des"
                label="时间维度"
              ></el-table-column>
              <el-table-column
                property="first_value"
                label="抄表数"
              ></el-table-column>
              <el-table-column property="ts" label="时间"></el-table-column>
            </el-table>
          </div>
          <!-- <div class="fenye">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :page-size="pageSize"
              :total="total"
              class="fenyone"
            >
            </el-pagination>
          </div> -->
          <!-- 右边模块一 -->
        </div>

        <!-- 右边结束 -->
      </div>
    </div>
  </div>
</template>
<script>
import Top from "../../components/common/top.vue";
import moment from "moment";
import exportExecl from "@/utils/export-excel.js";
import Echarts from "../../components/Echarts.vue";

export default {
  components: { Top, Echarts },
  data() {
    var validatepasstwo = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("报警阈值不能为空"));
      } else if (value < this.chongzhiform.one) {
        callback(new Error("报警值必须大于预警值"));
      } else {
        callback();
      }
    };
    return {
      substationValue: "",
      substationList: [],
      deviceValue:'',
      deviceList: [],
      meterList: [],
      timeValue: "",
      timeType: true,
      formatValue:'yyyy',
      timeList: [],
      dateValue: moment().format("YYYY"),
      lineData:{},
      echartData: {
        order: {
          //代表折线
          xData: [],
          series: [],
          unit: ""
        }
      },
      data:[],
      keydata:[],
      sendData:[],

      baojing: 0, //不想
      total: 0,
      pageSize: 12,
      current: 1,
      currentIndex: 0,
      pId: "",
      formLabelWidth: "100px",
    };
  },
  beforeDestroy() {
    clearInterval(this.tm2);
  },
  mounted() {
    // this.getmeterList();
    this.getseletop();
    this.getTimelist();
    this.startdui();
    // this.setcabinetfun();
    // this.warningfun();
    // this.tm2 = setInterval(() => {
    //   this.warningfun();
    // }, 30000);
  },
  created() {
  },
  methods: {
    getseletop() {
      this.$apiv.setsectlt({}).then((res) => {
        console.log(res, "选择框");
        this.substationList = res.data;
        // this.substationList = [{id:1,name:'聊城东'},{id:2,name:'冠县'}];
        this.substationValue = this.substationList[0].deptId;
        console.log(this.substationList, "配电所列表");
        console.log(this.substationValue, "默认选择配电所");
        this.getDeviceList()
      });
    },
    isStation(value) {
      this.substationValue = value;
      this.getDeviceList()
    },
    // 设备选择
    getDeviceList(){
      this.$apiv
        .realTime({
          dept_id: this.substationValue,
        })
        .then(res=>{
          console.log(res, "设备列表")
          this.deviceValue='';
          this.deviceList=[];
          this.deviceList=res.data[0].devices_data;
          this.deviceValue=this.deviceList[0].device_id;
          this.getTimelist()
        })
        .catch(res=>{
          console.log("设备列表error")
        })
    },
    isDevice(value){
      this.deviceValue = value;
      this.getTimelist()
    },  
    // 时间维度
    getTimelist() {
      this.$apiv
        .timeDimension({})
        .then((res) => {
          console.log(res, "时间维度");
          this.timeList = res.data;
          this.timeValue = this.timeList[0].value;
          if (this.timeValue == "1n") {
            this.dateValue = moment().format("YYYY");
            this.timeType = true;
            this.formatValue='yyyy';
          } else if (this.timeValue == "1d") {
            this.dateValue = moment().format("YYYY-MM");
            this.timeType = false;
            this.formatValue='yyyy-MM';
          }
          this.getmeterList();
          this.lishizxfun();
          console.log(this.timeValue, "默认选择时间维度");
        })
        .catch((res) => {
          console.log("时间维度error");
        });
    },
    // 选择时间维度
    isTime(value) {
      console.log("时间维度", value);
      this.timeValue = value;
      if (this.timeValue == "1n") {
        this.dateValue = moment().format("YYYY");
        this.timeType = true;
        this.formatValue='yyyy';
      } else if (this.timeValue == "1d") {
        this.dateValue = moment().format("YYYY-MM");
        this.timeType = false;
        this.formatValue='yyyy-MM';
      }
      this.startdui();
      console.log(this.dateValue, this.timeType, "日期切换");
    },
    // 选择时间
    isDate(value) {
      console.log("日期", value);
      this.dateValue = value;
      this.startdui();
    },
    // 表格
    getmeterList() {
      // console.log("设备id请求表格时", this.substationValue, this.timeValue);
      this.$apiv
        .meterData({
          // device_id: 12,
          device_id: this.deviceValue,
          interval: this.timeValue,
          time: this.dateValue,
          table: true,
        })
        .then((res) => {
          console.log(res, "抄表数据");
          this.meterList=[];
          this.meterList = res.data.table_data;
        })
        .catch((res) => {
          console.log("抄表数据error");
        });
      // this.meterList=[
      //   {name:'设备名称1',
      //     dept_name:'2021-01-01 00:00:00',
      //     code:'1',
      //     warm_early_warning:'100',
      //     warm_warning:'80'}
      // ]
    },
    //折线
    lishizxfun() {
      
      this.$apiv
        .meterData({
          // device_id: 12,
          device_id: this.deviceValue||'',
          interval: this.timeValue,
          time: this.dateValue,
          table: false,
        })
        .then((res) => {
          console.log("折线res", res);
          this.lineData={};
          this.lineData=res.data.line_data;
          // console.log("折线数据", this.lineData.x_list);
          this.echartData.order.xData = [];
          this.echartData.order.xData = res.data.line_data.x_list;
          this.echartData.order.unit = res.data.unit;
          let shujv = [
            {
              name: "能耗数据",
              stack: "Total",
              type: "line",
              // data:[10,20,30,40],
              data: this.lineData.y_list,
              showAllSymbol: false,
              symbol: "none",
              lineStyle: {
                normal: {
                  color: "#3598cc",
                  // shadowColor: "rgba(0, 0, 0, .3)",
                  shadowBlur: 0,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                },
              },
            },
          ];
          this.echartData.order.series = shujv;
        });
    },
    startdui() {
      console.log("开始查询", this.substationValue, this.timeValue);
      this.getmeterList();
      this.lishizxfun();
    },
    daochu1() {
      console.log("点击导出按钮了吗");
      this.$apiv
        .meterData({
          // device_id: 12,
          device_id: this.deviceValue,
          interval: this.timeValue,
          time: this.dateValue,
          table: true,
        })
        .then(res => {
          console.log("1111111111111", res);
          // this.loginLoading = false;
          exportBlob(res, "抄表数据");
        })
        .catch(res => {
          console.log("抄表数据error", res);
        });
    },
    daochu() {
      console.log("点击导出按钮了吗");
      this.$apiv
        .meterData({
          // device_id: 12,
          device_id: this.deviceValue,
          interval: this.timeValue,
          time: this.dateValue,
          table: true,
        })
        .then(res => {
          console.log("1111111111111", res);
          this.data = res.data.table_data;
          //导出示例
          this.keydata = [
            { header: "设备名", key: "device_name", width: 15 },
            { header: "能耗", key: "value", width: 20 },
            { header: "单位", key: "unit", width: 15 },
            { header: "时间维度", key: "time_des", width: 20 },
            { header: "抄表数", key: "first_value", width: 15 },
            { header: "时间", key: "time", width: 20 },
          ];
          this.sendData = [];
          this.data.forEach(item => {
            this.sendData.push({
              device_name: item.device_name,
              value: item.ele_count,
              unit:item.unit,
              time_des: item.time_des,
              first_value: item.first_value,
              time: item.ts,
              
            });
          });
          //数据量大建议使用for
          let tableName = "抄表数据统计";
          let fileName = "抄表数据.xlsx";
          // const charts=this.$refs.chart.$el
          // let baseCanvas = document.getElementById("zhexianceshi").firstChild;
          let baseCanvas = document.getElementsByTagName('canvas')[0];
          console.log("baseCanvas", (baseCanvas instanceof HTMLCanvasElement));
          exportExecl(
            this.sendData,
            this.keydata,
            tableName,
            fileName,
            baseCanvas,
            6,
            1
          );
          // this.loginLoading = false;
        })
        .catch(res => {
          console.log("报警历史记录error", res);
        });
    },
    chaobiao() {
      this.$router.push({ path: "/meterread" });
    },
    shishi() {
      this.$router.push({ path: "/realtime" });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val;
      this.setcabinetfun();
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../static/zhuti.css");
/deep/ .el-input__inner {
  background-color: rgb(0, 20, 66);
  color: #fff;
  margin-left: 10px;
}
.tableyang {
  /deep/ .el-table--border,
  .el-table--group {
    border: 1px solid transparent;
    border-top: 1px solid #055288;
  }

  /deep/ .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: #055288;
  }

  /deep/ .el-table--border th.el-table__cell,
  .el-table__fixed-right-patch {
    border: 0px solid #055288;
    border-left: 1px solid #055288;
  }

  /deep/ .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border-top: 1px solid #055288;
    border-right: 0px solid #055288;
    border-bottom: 0px solid #055288;
    border-left: 1px solid #055288;
  }

  /deep/ .el-table {
    background-color: transparent;

    th,
    td {
      background-color: transparent;
    }

    .el-table__expanded-cell {
      background-color: transparent !important;
    }

    th.el-table__cell {
      height: 45px;
      background-color: #011543;
      color: #fff;
    }

    tr > td {
      height: 45px;
      background-color: #011543;
      color: #fff;
    }

    tr:hover > td {
      background-color: #011543 !important;
    }

    tbody tr:hover > td {
      background-color: #011543 !important;
    }
  }

  /deep/ .el-table th.el-table__cell.is-leaf {
    border: 1px solid #055288 !important;
    border-bottom: 0px solid #055288 !important;
    border-right: 0px solid #055288 !important;
  }

  /deep/ .el-table__body-wrapper {
    border-right: 1px solid #055288 !important;
  }

  /deep/ .el-table__header-wrapper {
    border-right: 1px solid #055288 !important;
  }

  /deep/ .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
    height: 16px;
  }

  /* 滚动条轨道 */

  /deep/
    .el-table--scrollable-x
    .el-table__body-wrapper::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0.0313rem rgba(0, 0, 0, 0.3);
    border-radius: 0.0521rem;
    background-color: #08163d;
  }

  /* 滚动条没有滑块的轨道部分 */

  /deep/
    .el-table--scrollable-x
    .el-table__body-wrapper::-webkit-scrollbar-track-piece {
    width: 6px;
  }

  /* 滚动条上的滚动滑块 */

  /deep/
    .el-table--scrollable-x
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 0.0521rem;
    -webkit-box-shadow: inset 0 0 0.0313rem rgba(0, 0, 0, 0.3);
    background-color: #074176;
  }

  /* 滚动条上的按钮 (上下箭头) */

  /deep/.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
    width: 0.036rem;
    height: 0.036rem;
    background-color: #08163d;
  }
}
// .anniuy /deep/ .el-button:focus,
// .anniuy .el-button:hover {
//   color: #ffffff;
//   border-color: #c6e2ff;
//   background-color: #144a8b;
// }
// .anniuy /deep/ .el-button + .el-button {
//   margin-left: 0;
// }
.anniu {
  width: 70px;
  height: 28px;
  background: #0f5fa8;
  border: 0rem;
  color: #fff;
  margin-left: 20px;
}
</style>
